<template>
  <div class="home">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
    />
      <div class="content">
          <van-swipe :autoplay="0" :show-indicators="false">
            <van-swipe-item v-for="(index, key) in img" :key="key">
              <div class="my-wipe">
                <img class="img" :src="index"/><br>
                <div class="zi">
                  此后，你就嵌入我一段长久的记忆。以自身无可替代的湛蓝，
                  草木带来葱绿，臂弯里有风声暗涌，洁白的云层转身就成了隔山隔海的思念。
                </div>
                <div class="auther">
                  {{auther}}
                </div>
                <div class="botoom_btn">
                  <van-icon class="btn-i" name="good-job-o" size="7vw" />
                  <van-icon class="btn-u" name="like-o" size="7vw" />
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <tabber />
  </div>
</template>

<script>
import tabber from '../components/common/tabber.vue'
export default {
  components:{
    tabber
  },
  data() {
    return {
      img:[
        "https://cdn.magdeleine.co/wp-content/uploads/2021/05/StockSnap_DXLNXCCDGP-1400x933.jpg",
        "https://cdn.magdeleine.co/wp-content/uploads/2021/05/StockSnap_DXLNXCCDGP-1400x933.jpg",
        "https://cdn.magdeleine.co/wp-content/uploads/2021/05/StockSnap_DXLNXCCDGP-1400x933.jpg",
        "https://cdn.magdeleine.co/wp-content/uploads/2021/05/StockSnap_DXLNXCCDGP-1400x933.jpg"
      ],
      auther: "——齐霄龙",
      active: 0,
      value: '2222222222'
    };
  },
};
</script>

<style>
.home{
  width: 100%;
  height: 160vw;
  overflow: hidden;
}
.content{
  width: 100%;
  height: 100%;
  margin-top: 2%;
  
}
.my-wipe{
  width: 90%;
  height: 100%;
  margin: 0 auto;
  margin-bottom: 2vw;
  background-color: #fcfcfc;
  box-shadow:#bbbbbb 0 0 2vw;
  border-radius: 2vw;
}
.img{
  border-start-start-radius: 2vw;
  border-start-end-radius: 2vw;
  width: 100%;
}
.zi{
  width: 80%;
  font-size: 5vw;
  margin: 0 auto;
  margin-top: 6vw;
  line-height: 8vw;
  font-family: 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.auther{
  width: 80%;
  font-size: 5vw;
  font-family: Cursive;
  margin: 0 auto;
  margin-top: 6vw;
  text-align: right;
}
.botoom_btn{
  width: 90%;
  margin-top: 6vw;
  text-align: right;
}
.btn-i{
  margin: 3vw;
  color: rgba(248, 4, 4, 0.486);
}
.btn-u{
  color: rgba(36, 36, 36, 0.973);
}

</style>
